There should be at least a space character between the unicode character and its name. This would happen with a copy-paste of the code above because there's a CR (or LF, or CRLF) between, which HTML renderers will fold into a space character. If you want the sample code to be exactly the same as that which is used to "produce output in the page", just change my space to a CR/LF/CRLF.

We decided not to add that space, and use a padding instead. See:

• Add .uname and .codepoint to style characters inline tr-design#323
• https://github.com/w3c/tr-design/pull/323/files#diff-5e64d0cc9c46937489d71595a4efb9d03f22574a0e83ca8b132a8833e03e6c60R1372

Ugh. As noted in that VERY LONG discussion, removing this space character is VERY counterintuitive. It's really unfortunate that there appears to be no clever way of treating an inline space character as if it weren't there for the CSS spacing. I do note that the template appears to have a line break following the </bdi> which gets folded into a space char which then increases the spacing due to the CSS. I won't fight it, but yeesh!

There's an LF in the <pre> block because we want the code to be clear, rather than having an extra long line. And there's no LF (or space) in the rendered result below.